<template>
	<view>
		<u-navbar :safeAreaInsetTop="true" title=" " autoBack :bgColor="'rgba(255,255,255,'+opc+')'" placeholder>
			<view class="" slot='center'>
				<view class="navcenter">
					购物车({{list.length}})
				</view>
			</view>
			<u-icon slot='right' name="trash" size="40rpx" style="font-weight: bold;" color="#000"
				@click="delCar"></u-icon>
		</u-navbar>

		<view class="con">
			<view class="con__item" v-for="(item,index) in list" :key="index">
				<view class="con__item__check" @click="item.ischeck=!item.ischeck,choose()">
					<u-icon v-if="item.ischeck" name="checkmark-circle-fill" size="40rpx" color="#e3432d"></u-icon>
					<view class="con__item__nocheck" v-else>

					</view>
				</view>
				<image :src="$getImg(item.image)" class="con__item__pic" mode="aspectFill"></image>
				<view class="" style="flex: 1;">
					<view class="con__item__name">
						{{item.name}}
					</view>
					<view class="con__item__gg">
						{{item.label}}
						<!-- <u-icon name="arrow-right" size="21rpx" color="#999999"></u-icon> -->
					</view>
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="con__item__price">
							{{item.price}}
						</view>

						<u-number-box v-model="item.num" @change="(e)=>updatenum(e,item.id)">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="24rpx" color="#6a6a6a"></u-icon>
							</view>
							<text slot="input" style="width: 70rpx;text-align: center;font-size: 28rpx;"
								class="input">{{item.num}}</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#6a6a6a" size="24rpx"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="u-flex u-flex-y-center" @click="isall=!isall,clickall()">
				<view class="footer__check">
					<u-icon v-if="isall" name="checkmark-circle-fill" size="40rpx" color="#e3432d"></u-icon>
					<view class="con__item__nocheck" v-else>

					</view>
				</view>
				<view class="footer__all">
					全选
				</view>

			</view>
			<view class="u-flex u-flex-y-center footer__yx">
				已选{{allnum}}件 <view class="con__item__price">
					{{money}}
				</view>

				<u-button :customStyle="{width:'195rpx',height:'73rpx',padding:0,fontSie:'33rpx',margin:'0 0 0 20rpx',}"
					shape='circle' color="#E3432D" text="立即结算" @click="show=true" :disabled="money==0"></u-button>
			</view>
		</view>
		<u-popup mode="bottom" :show="show" round="30rpx" @close="show=false">
			<view class="popbox">
				<view class="" style="padding: 0 30rpx;">
					<view class="popbox__addrbox" @click="navto('/pages/personal/addr')">
						<image src="/static/goods/addr.png" class="popbox__addrbox__icon" mode=""></image>
						<view class="" v-if="addressInfo.id" style="flex: 1;">
							<view class="" style="flex: 1;">
								<view class="popbox__addrbox__addr">
									{{addressInfo.province+addressInfo.city+addressInfo.area}}{{addressInfo.detail}}
								</view>
								<view class="popbox__addrbox__name">
									{{addressInfo.username}} {{addressInfo.mobile}}
								</view>
							</view>
						</view>
						<view class="" style="flex: 1;" v-else>
							暂无地址，请先新增地址
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="popbox__info">
						<view class="popbox__bz" style="margin-top: 40rpx;">
							<view class="" style="flex: 1;">
								备注:
								<u--textarea v-model="remark" placeholder="请输入备注" border="none"></u--textarea>
							</view>
						</view>
					</view>
				</view>
				<u-gap bgColor="#F7F7F9" height="18rpx"></u-gap>

				<u-radio-group v-model="value" iconPlacement="right" placement='column'>
					<u-radio activeColor="#FF4D30"
						:customStyle="{paddingRight: '30rpx',width:'720rpx',backgroundColor:value==item.name?'rgba(255, 77, 48, .05)':''}"
						v-for="(item, index) in radiolist1" :key="index" :name="item.name" @change="radioChange">
						<view class="popbox__pay">
							<image :src="'/static/goods/'+item.icon+'.png'" class="popbox__pay__icon" mode=""></image>
							<view class="popbox__pay__label">
								{{item.name}} <text v-if="item.name=='余额支付'">({{userInfo.money}})</text>
							</view>
						</view>
					</u-radio>
				</u-radio-group>
				<view class="popbox__footer">
					<u-button :text="'确认支付(￥'+money+')'" color="#FF4D30" shape='circle' size="large" @click="submit"
						:disabled="money==0"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		cartlist,
		editcart,
		delcart,
		userInfo,
		cartcreateOrder
	} from "@/request/api/my.js"
	import {
		getAddress,
		defaultAddress
	} from "@/request/api/address.js"
	export default {
		data() {
			return {
				value: '微信支付',
				radiolist1: [{
						name: '微信支付',
						icon: 'wx'
					},
					{
						name: '余额支付',
						icon: 'ye'
					},
				],
				
				userInfo: {
					money: 0,
				},
				opc: 1,
				list: [],
				isall: false,
				allnum: 0,
				money: 0,
				show: false,
			
				userInfo: {
					money: 0,
				},
				remark: "",
				addressInfo: {

				},
			};
		},
		onShow() {
			if (uni.getStorageSync('chooseId')) {
				getAddress({
					id: uni.getStorageSync('chooseId')
				}).then(res => {
					this.addressInfo = res.data;
				})

			} else {
				defaultAddress().then(res => {
					this.addressInfo = res.data;
				})
			}
			userInfo().then(res => {
				this.userInfo = res.data;
			})
			if (uni.getStorageSync("reload")) {
				uni.removeStorageSync("reload")
				cartlist().then(res => {
					this.list = res.data.map(item => {
						return {
							...item,
							ischeck: false,
						}
					})
				})
				
			}

		},
		onLoad() {
			cartlist().then(res => {
				this.list = res.data.map(item => {
					return {
						...item,
						ischeck: false,
					}
				})
			})
		},
		methods: {
			radioChange(n) {
				this.value = n
			},
			submit() {
				let paytype = this.value == '微信支付' ? 2 : 1;
				if (!this.addressInfo.id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					});
					return
				}
				if (paytype == 2) {
					uni.showToast({
						title: '微信支付暂未开通',
						icon: 'none'
					});
					return
				}
				if (paytype == 1 && this.userInfo.money < Number(this.money)) {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					return
				}
				let ids = [];
				this.list.forEach(item => {
					if (item.ischeck) {
						ids.push(item.id)
					}
				})
				let param = {
					cart_list: ids.join(","),
					address_id: this.addressInfo.id,
					paytype,
					total_price: Number(this.money),
					remark: this.remark,
				}

				// console.log(param)
				cartcreateOrder(param).then(res => {
					if (res.code == 1) {
						uni.setStorageSync("reload", 1)
						uni.navigateTo({
							url: "/pages/goods/orderlist?status=1"
						})
					}

				})

			},
			updatenum(e, id) {
				console.log(e);
				
				editcart({
					id,
					num: e.value
				}).then(res => {
					this.choose()
				})

			},
			delCar() {
				let ids = [];
				this.list.forEach(item => {
					if (item.ischeck) {
						ids.push(item.id)
					}
				})
				if (ids.length == 0) return;
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认移除这些商品？',
					success: function(res) {
						if (res.confirm) {
							delcart({
								id: ids.join(",")
							}).then(res => {
								that.list = that.list.filter(item => {
									return !ids.includes(item.id)
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			choose() {
				let arr=[]
				this.list.map(t=>{
					if(t.ischeck){
						arr.push(t)
					}
				})
				if(arr.length!==this.list.length){
					this.isall=false
				}else{
					this.isall=true
				}
				this.allnum = 0;
				this.money = 0;
				this.list.forEach(item => {
					if (item.ischeck) {
						this.allnum += item.num;
						this.money += (item.num * Number(item.price))
					}
				})
				this.money = this.money.toFixed(2);
			},
			clickall() {
				if (this.isall) {
					this.list.map(t => {
						t.ischeck = true
					})
				} else {
					this.list.map(t => {
						t.ischeck = false
					})
				}
				this.allnum = 0;
				this.money = 0;
				this.list.forEach(item => {
					if (item.ischeck) {
						this.allnum += item.num;
						this.money += (item.num * Number(item.price))
					}
				})
				this.money = this.money.toFixed(2);
				this.$forceUpdate()
			},
			change() {

			}
		}
	}
</script>

<style lang="scss">
	.navcenter {
		width: 604rpx;
	}

	.con {
		padding: 30rpx 30rpx 133rpx;

		&__item {
			height: 274rpx;
			background: #FFFFFF;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			display: flex;
			align-items: center;
			padding: 0 25rpx 0 0;
			margin-bottom: 30rpx;

			&__pic {
				width: 196rpx;
				height: 196rpx;
				background: #FF6501;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #FAFAFA;
				margin-right: 25rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #010101;
				line-height: 30rpx;
			}

			&__gg {
				height: 55rpx;
				background: #f7f6f6;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				display: flex;
				align-items: center;
				padding: 0 17rpx;
				justify-content: space-between;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A6A6A;
				margin-bottom: 40rpx;
				margin-top: 20rpx;
			}

			&__price {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 34rpx;
				color: #FF4E31;
				line-height: 26rpx;

				&::before {
					content: "￥";
					font-size: 24rpx;
				}
			}

			&__nocheck {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background: #fff;
				border: 2rpx solid #CBCBCB;
			}

			&__check {
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.minus {
		height: 46rpx;
		width: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #DFDFDF;
	}

	.plus {
		height: 46rpx;
		width: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 1rpx solid #DFDFDF;
	}

	.u-number-box {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 1rpx solid #DFDFDF;
		height: 46rpx;
	}

	.footer {
		width: 687rpx;
		height: 133rpx;
		background: #FEFFFF;
		position: fixed;
		bottom: 0;
		right: 0;
		padding: 0 43rpx 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__check {
			width: 62rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&__all {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 25rpx;
			color: #979797;
			line-height: 33rpx;
		}

		&__yx {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 25rpx;
			color: #333;
		}
	}

	.popbox {
		height: 90vh;
		position: relative;


		&__addrbox {
			height: 142rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E9EAEC;

			&__icon {
				width: 36rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #232323;
				line-height: 46rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #747474;
				line-height: 46rpx;
			}
		}

		&__info {
			padding: 40rpx 0;

			&__pic {
				width: 178rpx;
				height: 177rpx;
				background: #42C03D;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 24rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 33rpx;
				color: #181818;
				line-height: 33rpx;
				margin: 5rpx 0 17rpx;
			}

			&__price {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 43rpx;
				color: #FF4D30;
				line-height: 43rpx;
				margin-bottom: 30rpx;

				&::before {
					content: "￥";
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #FF4D30;
					line-height: 43rpx;
				}
			}

			.minus,
			.plus {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #111A2B;
				background-color: #F2F6F9;
			}

			.minus {
				border-radius: 10rpx 0 0 10rpx;
			}

			.plus {
				border-radius: 0 10rpx 10rpx 0;
			}
		}

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #0A1122;
			line-height: 30rpx;
			margin-top: 47rpx;
			margin-bottom: 33rpx;
		}

		&__fl {
			width: 690rpx;
			margin-bottom: 63rpx;

			&__list {
				display: flex;
				align-items: center;
			}

			&__item {
				height: 58rpx;
				background: #F2F6F9;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				border: 1rpx solid #ffffff;
				margin-right: 16rpx;
				flex-shrink: 0;

				&__p {
					width: 58rpx;
					height: 58rpx;
					background: #42C03D;
				}

				&__name {
					padding: 0 22rpx;
					background-color: #F2F6F9;
					display: flex;
					align-items: center;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #0A1122;
					line-height: 26rpx;
				}
			}

			.active {
				border-color: #e3432d;
			}
		}

		&__bz {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #141F32;
			line-height: 26rpx;
			display: flex;
			align-items: center;
		}

		&__pay {
			padding: 30rpx 0 30rpx 30rpx;
			display: flex;
			align-items: center;

			&__icon {
				width: 41rpx;
				height: 41rpx;
				margin-right: 20rpx;
			}

			&__label {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #010000;
				line-height: 27rpx;
				flex: 1;
			}
		}

		&__footer {
			padding: 47rpx 18rpx 47rpx 43rpx;
			width: 689rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>